<!-- 从业者-考试培训-考证详情 -->
<template>
	<view class="study-container">
		<view class="user-card-container">
			<!-- 主卡片 -->
			<view class="user-card">
				<!-- 用户信息 -->
				<!-- 课程名称 -->
				<view class="course-list">
					<view class="course-item" v-for="(course, index) in courseList" :key="course.bkz_code">
						<view class="course-left">
							<u-image :src="course.bkz_logo_uri[0].url" width="220rpx" height="240rpx" mode="aspectFill" radius="4"></u-image>
						</view>
						<view class="course-right">
							<text class="course-name">{{ course.bkz_name }}</text>
							<text class="course-level">可报名等级：{{ course.bkz_levelnames }}</text>
							<text class="course-teacher">报名截止时间：{{ course.bkz_bmenddate }}</text>
							<text class="course-count">报名城市：{{ course.bkz_bkcs }}</text>
							<text class="course-price">报名费用：¥{{ minPrice }}元起/人</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 第二部分 -->
		<view class="floating-stats">
			<!-- 介绍 -->
			<view  class="teacher-section">
				<view class="teacher-explain">
					<view class="teacher-content">
						<text class="teacher-text">{{ courseList[0].bkz_kzjs_desc }}</text>
					</view>
					<view class="teacher-img">
						<u-image v-if="courseInfo.introImage" :src="courseInfo.introImage" width="100%" height="300rpx"
							mode="widthFix" radius="8" class="teacher-image"></u-image>
					</view>
				</view>
			</view>
		</view>
		<!-- 底部操作栏 -->
		<view class="action-bar">
			<u-button type="default" shape="circle" @click="kfService" plan :customStyle="customStyle" class="buy-btn">
				客服助理
			</u-button>
			<u-button open-type="share" type="default" shape="circle" plan :customStyle="customStyle" class="buy-btn">
				分享赚佣金
			</u-button>
			<u-button type="success" shape="circle" @click="teamRegister" :customStyle="customStyleBut" class="buy-btn-main">
				立即报名
			</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				courseList: [{
						id: 1,
						cover: '/static/course1.jpg',
						name: '前端开发高级课程',
						level: '一级、二级、三级、四级',
						expirDate: '6月20日 00:00',
						lessonCount: 45,
						price: '80.00',
						city: '福州',
						purchased: false
					}
				],
				minPrice: '',  ///最小的金额
				courseInfo: {
					introduction: '图文介绍文章图文介绍文章图文介绍文章图文介绍文章图文介绍图文介绍文章图文介绍文章图文介绍文章图文介绍文章图文',
					introImage: '/static/course-intro.jpg',
					price: '10.8'
				},
				customStyle: {
					"color": "#03B8CD",
					"border": "2rpx solid #03B8CD"
				},
				customStyleBut: {
					backgroundColor: "#03B8CD",
					"color": "#FFF",
				},
				// 考证code
				bkzcode: '',
				invitationLink: "", // 替换为实际邀请链接
			}
		},
		onLoad(options) {
			if(options.ywcode === 'kzbm') {				
				// 邀请进来的链接				
				uni.setStorageSync('ywcode','kzbm')
				uni.setStorageSync('linkcode', options.linkcode)
				this.bkzcode = options.linkcode
			} else {
				this.bkzcode = options.bkzcode
			}
			
			console.log('分享进入：', options,options.linkcode,options.ywcode)
		},
		onShow() {
			this.getbkzDetails()
			// this.getyqmlink()
		},
		methods: {
			getbkzDetails() {
				this.$u.api.querykz({
					"bkzcode": this.bkzcode, //#考证code
				}).then(res => {
					
					this.courseList = []
					this.courseList.push(res.data.base_info)
					this.minPrice = this.minPricecount(res.data.base_info.bkz_levels)
					console.log('具体考试：', res,this.courseList )
				})
			},
			// 最小的金额
			minPricecount(price) {
				console.log('金额：', price)
				if(!price.length) return null;
				// return Math.min(...price.map(item => item.kzl_price))
				let minprice = price.reduce((min, current) => 
				    current.kzl_price < min.kzl_price ? current : min
				  );
				return minprice.kzl_price
				// console.log('mini:', minprice,minprice.kzl_price)
				
			},
			// 客服
			kfService() {
				uni.navigateTo({
					url: `/pages/Institution/mine/makePhoneCall`
				});
			},
			// 分享邀请码，赚佣金
			// 取得并复制邀请码
			getyqmlink() {
				this.$u.api.createyqmlink({
					"usercode": uni.getStorageSync('usercode'), //#用户code
					"params":{"linkcode":this.bkzcode, "ywcode":"kzbm"}, ///要传入的参数，ywcode:  团队邀请考证报名：kzbm  ,  比赛邀请： bsbm   直播：zbbm   课程：kcbm
				}).then(res => {
					console.log('生成邀请链接：', res)
					this.invitationLink = res.data.base_info
					// uni.setClipboardData({
					//   data: this.invitationLink,
					//   success: () => {
					//     uni.showToast({
					//       title: '链接已复制',
					//       icon: 'success'
					//     });
					//   }
					// });
				})
			},
			
			// 从业者立即报名
			teamRegister() {
				uni.navigateTo({
					url: `/pages/Practitioner/examTrain/examSignUp?bkzcode=${this.courseList[0].bkz_code}`
				});
			},
		// 核心：微信会在用户点击时调用这里
		onShareAppMessage(options) {
				// 可区分 button 还是右上角菜单
				console.log('分享来源：', options.from,this.invitationLink) // 'button' / 'menu'
		
				return {
					title: '分享李长邦康养人才服务',                // 分享卡片标题
					path: `/pages/login/login?linkcode=${this.bkzcode}&&ywcode=kzbm`, // 一定带 /
					imageUrl: '',             // 自定义图片，留空用默认截图
					promise: new Promise(resolve => {
						// 如果想异步拉取数据再返回，在这里 resolve
						resolve({
							title: this.shareTitle,
							path: `/pages/login/login?linkcode=${this.bkzcode}&&ywcode=kzbm`,
							imageUrl: ''
						})
					})
				};
			},
		  // 如果想同时支持“分享到朋友圈”，再加这个钩子
		  onShareTimeline() {
		    return {
		      title: '分享李长邦康养人才服务',
		      query: `/pages/login/login?linkcode=${this.bkzcode}&&ywcode=kzbm`, // 朋友圈用 query 字符串
		      imageUrl: ''
		    };
		  }
		}
	}
</script>

<style lang="scss" scoped>
	.study-container {
		background-color: #6c6c6c;
	}

	/* 外层容器 */
	.user-card-container {
		position: relative;
		padding-bottom: 60rpx;
		/* 为浮动统计留出空间 */
		background-color: #6c6c6c;
		height: 235px;
		top: 10px;

	}

	/* 主卡片样式 */
	.user-card {
		padding: 30rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
		color: #ffffff;

	}

	// 课程名称
	.course-list {
		border-radius: 8rpx;
		overflow: hidden;
	}

	.course-item {
		display: flex;
		padding: 20rpx;
		// border-bottom: 1rpx solid #eee;
	}

	.course-left {
		margin-right: 20rpx;
	}

	.course-right {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.course-name {
		font-size: 30rpx;
		font-weight: bold;
		color: #ffffff;
		margin-bottom: 10rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
	}

	.course-level,
	.course-teacher {
		font-size: 24rpx;
		color: #ffffff;
		margin-bottom: 8rpx;
	}

	// .course-footer {
	// 	display: flex;
	// 	// justify-content: space-between;
	// 	margin-top: 10rpx;

	// 	.course-count {
	// 		font-size: 24rpx;
	// 		color: #ffffff;
	// 		margin-right: 10px;
	// 	}

	// 	.course-price {
	// 		font-size: 28rpx;
	// 		color: #ffffff;
	// 		font-weight: bold;
	// 	}
	// }

	/* 浮动统计行样式,内容 */
	.floating-stats {
		position: absolute;
		top: 180px;
		left: 0rpx;
		right: 0rpx;
		// height: 80%;
		background: #f0f0f0;
		border-radius: 40rpx 40rpx 0 0;

		.course-tabs {
			position: static;
			margin: 10px;
			left: 0rpx;
			right: 0rpx;
			border-radius: 40rpx 40rpx 0 0;
			background-color: #f0f0f0;
		}

		// 讲师内容
		.teacher-section {
			padding: 10rpx;
			background-color: #ffffff;
			border-radius: 12rpx;
			// margin: 5px;
		}	
	}

	.teacher-explain {
		background-color: #fff;
		border-radius: 12rpx;
		padding: 24rpx;
		// margin-bottom: 20rpx;

		.teacher-content {
			font-size: 32rpx;
			margin-bottom: 10px;
		}
	}

	// 底部
	.action-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 100rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 20rpx;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
		z-index: 100;

		.buy-btn {
			width: 160rpx;
			height: 90rpx;
		}
		.buy-btn-main {
			width: 350rpx;
			height: 80rpx;
		}

	}
</style>